<template>

  <div class="refine_groupdetail">
    <h2 class="titleblue">{{this.mode === 'edit' ? '编辑群组' : '群组详情'}}</h2>
    <div class="contant">
      <el-row>
        <el-col>
          <label>群名称</label>
          <el-input v-model="groupName" :disabled="mode !== 'edit'" class="select-width-220"></el-input>

          <label>&nbsp;&nbsp;&nbsp;&nbsp;群人数</label>
          <el-input v-model="allContact.length" disabled class="select-width-220"></el-input>
          <el-button v-if="mode === 'edit'" type="primary" class="addperson" @click="addMembers">编辑成员</el-button>
        </el-col>
        <el-col>
          <data-table :page="currentPage" :head="head" :data="tableData" :actions="actions" @callback="gridActions"
                      class="intendance-table"></data-table>
        </el-col>
        <el-col style="text-align:center">
          <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                           layout="total,prev, pager, next, jumper"
                           :total="allContact.length" background>
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <div class="footerbtn">
        <el-button type="primary" @click="doSave" class="sure">确定</el-button>
        <el-button class="cancel" @click="doCancel">取消</el-button>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="showDataTree"
      width="80%"
      append-to-body
    >
      <h2 class="titleblue">编辑成员</h2>
      <data-tree title="编辑成员" ref="memberList" :groupData="groupArray" :memberArray="allContact" class="tele-tree"></data-tree>
      <div class="footerbtn">
        <el-button type="primary" @click="sureEdit" class="sure">确定</el-button>
        <el-button class="cancel" @click="showDataTree = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from "@/components/common/DataTable.vue"
  import DataTree from '@/components/common/DataTree.vue'
  import groupService from '@/services/GroupService'
  import contactService from '@/services/ContactService'

  export default {
    props: ['groupData', 'mode'],
    components: {
      'data-table': DataTable,
      'data-tree': DataTree
    },
    data: function () {
      return {
        groupName: '',
        head: [
          {name: "姓名", prop: "name"},
          {name: "管理单位", prop: "orgName"},
          {name: "所属部门", prop: "deptName"},
          {name: "联系电话", prop: "telephone"},
        ],
        tableData: [],
        allContact: [],
        actions: this.mode === 'edit' ? ['remove'] : null,
        currentPage: 1,
        dataCount: 0,
        showDataTree: false,
        groupArray: []
        // page: 1,
      };
    },
    created() {
      this.groupName = this.groupData.name
      // this.dataCount = this.groupData.contacts.length
      this.allContact = [].concat(this.groupData.contacts)
      this.handleCurrentChange(1)
      // this.getData(1);
      // this.name=this.member;
    },
    watch: {
      mode: {
        handler(newVal, oldVal) {
          this.actions = this.mode === 'edit' ? ['remove'] : null
        }
      },
      groupData: {
        deep: true,
        handler(newVal, oldVal) {
          this.groupName = newVal.name
          this.allContact = newVal.contacts
          this.handleCurrentChange(1)
        }
      }
    },
    methods: {
      gridActions(param) {
        if (param.action === 'remove') {

          for (let i = 0; i < this.allContact.length; i++) {
            if (this.allContact[i].id === param.data.id) {
              this.allContact.splice(i, 1)
              break;
            }
          }
          this.handleCurrentChange(this.currentPage)
        }
      },
      handleCurrentChange(val) {
        let data = this.allContact.filter((c, idx) => idx >= (val - 1) * 10 && idx < val * 10)
        this.tableData = data
        // this.getData(val)
      },
      doSave() {
        if (!this.groupName) {
          this.$alert('请输入群组名称')
          return
        }

        let entity = {...this.groupData}
        entity.name = this.groupName
        entity.contacts = this.allContact
        entity.contactCount = this.allContact.length
        groupService.update(entity).then(() => {
          this.$message.success('群组编辑成功')
          this.$emit('refresh')
        })
      },
      doCancel() {
        this.$emit('close')
      },
      async addMembers() {
        let allContact = await contactService.search('insideGroup==' + (this.groupData.insideGroup ? 'true' : 'false'))
        groupService.search('insideGroup==' + (this.groupData.insideGroup ? 'true' : 'false')).then(data => {
          let groupData = []
          groupData.push({
            name: '全部',
            id: 0,
            users: allContact
          })
          data.forEach(group => {
            groupData.push({
              name: group.name,
              id: group.id,
              users: group.contacts.map(c => {return {name: c.name, id: c.id}})
            })
          })
          this.groupArray = groupData
          this.showDataTree = true
        })

      },
      sureEdit() {
        this.allContact = this.$refs.memberList.members
        this.showDataTree = false
        this.handleCurrentChange(this.currentPage)
      },
      cancelEdit() {

      }
    }
  };

</script>

<style lang="scss">

  .refine_groupdetail {
    .contant {
      padding-bottom: 20px;
      .el-row {
        .el-col {
          margin-bottom: 10px;
          label {
            margin-right: 10px;
          }
          .addperson {
            margin-left: 10px;
            width: 88px;
            height: 40px;
            line-height: 40px;
            background-color: #0062cd;
            border: none;
            padding: 0;
            text-align: center;
            border-radius: 2px
          }
          .el-table {
            margin-top: 20px;
          }
          .block {
            text-align: center;
            .el-pagination {
              margin: 20px 0;
            }
          }
        }
      }
    }

  }

</style>
